[Amazon Connect]「サードパーティアプリケーション」のワークショップをやってみた

こんにちは、洲崎です。
Amazon Connect Agent Workspaceで利用できる「サードパーティアプリケーション」機能のワークショップがあったので、やってみました。

サードパーティアプリケーション機能とは

サードパーティアプリケーションとは、Amazon Connect Agent WorkspaceにWebページや独自のアプリケーションを表示することができる機能です。
2024/3/26にGA（一般公開）され、誰でも利用できるようになりました。
詳細については、こちらの記事をご確認ください。

このサードパーティアプリケーションのワークショップがありましたので、早速やってみました。

ワークショップの前提

本ワークショップを行うにあたり、下記の作成が完了していることが前提となります。

• AWSアカウントの作成
• Amazon Connectインスタンスの作成
• Amazon Connect ユーザーの作成

また、本ワークショップはAWS CloudFormationを利用しますが、以下のリソースが作成されます。

• Amazon S3：Webサイトのコンテンツを保存する用
• AWS Lambda:ウェブサイトのコンテンツをS3バケットにコピーするためのLambda関数
• AWS CloudFront:ウェブページをホストし、インターネット経由でS3バケットのコンテンツにアクセスできるようにする用

やってみる

CloudFormationのデプロイ

ワークショップにあるCloudFormationテンプレートをローカルにダウンロードします。

AWSマネジメントコンソールから、CloudFormationのページにいき、スタックの作成で以下を選択します。

• テンプレートの準備
  • テンプレートの準備完了
• テンプレートの指定
  • テンプレートファイルのアップロード
  • ローカルにダウンロードしたyamlファイルをアップロードします

スタック名は任意の名前を入力します。（例：third-party-workshop）

スタックオプションの設定はデフォルトのままで次に進みます。

「AWS CloudFormation によって IAM リソースが作成される場合があることを承認します。」にチェックをいれて、「送信」をクリックします。

5分ほど待つと、デプロイが完了します。ステータスが「CREATE_COMPLETE」になっていることを確認します。

出力タブにある「WebsiteURL」のCloudFrontのドメインを確認し、クリックします。

以下の画面がでることを確認します。

CloudFormationで作成されたリソースを見てみる

設定を進めていく前に、CloudFormationで作成されたリソースをざっと見てみました。

作成されたリソースは以下です。

• Amazon S3
  • コンテンツ保存用のS3バケット
  • バケットポリシー
• Lambda
  • CloudFormationのデプロイをトリガーとしたLambda トリガー
  • Webサイトのファイルをダウンロードし、S3バケットにアップロードするLambda関数
• CloudFront
  • コンテンツ公開用のディストリビューション
  • OAI
• IAM
  • Lambda用のIAMロール

Lambda関数は中身をざっと見ると、S3バケットにコンテンツを格納するのが目的で、スポット的な利用用途でした。
以下コードの抜粋です。

def download_from_cloudfront(cloudfront_url, object_key):
    try:
        cloudfront_url = cloudfront_url.rstrip('/')
        url = f"{cloudfront_url}/{object_key}"
        with urllib.request.urlopen(url) as response:
            return response.read()
    except Exception as e:
        logger.error(f"Error downloading {object_key} from CloudFront: {e}")
        raise

def upload_to_s3(s3_resource, destination_bucket, object_key, content, content_type):
    try:
        s3_object = s3_resource.Object(destination_bucket, object_key)
        s3_object.put(Body=content, ContentType=content_type)
    except Exception as e:
        logger.error(f"Error uploading {object_key} to S3: {e}")
        raise

今回のソリューションはS3バケットのコンテンツの中身がメインですね。
作成されたS3バケットを見ると、index.htmlを含めた複数のファイルが格納されていることを確認できます。
staticの中身をみると、cssとjsにそれぞれ肝となるコードが格納されています。
より興味のある方は覗いてみてください。（Reactが使われていました）

サードパーティアプリケーションの設定

ワークショップの設定に戻ります。
Amazon Connectコンソールから、「サードパーティーのアプリケーション」を開き、「アプリケーションを追加」をクリックします。

Amazon Connectで利用するユーザーのセキュリティプロファイルで、「エージェントアプリケーション」の「MyFirstThirdPartyApp」のアクセスを許可します。

Amazon ConnectコンソールからAgent Workspaceを開きます。

右上にあるランチャーから「MyFirstThirdPartyApp」をクリックします。

すると、今ログインしているエージェントのARN、名前、ステータス、ルーティングプロファイル、対応できるチャネル（電話・チャット・タスク）の数が動的に取得され表示されました！

テスト

チャットのテスト機能で、動作を確認します。

テスト設定をクリックします。

テストで利用する問い合わせフローを指定、お客さまの名前を記載します。

下5つの項目も含めて、動的に表示されました！
チャネルのタイプ（今回はchat）、現在のキュー、コンタクトがキューに入ったタイムスタンプ、接続時間（自動更新はされないです）、転送されてきたコンタクトIDが反映されました。

下にあるContact Attributesは特に何も表示されませんでした。（別途コンタクトフローで指定をしたら見れるものと思われます）

最後に

サードパーティアプリケーションのワークショップをやってみました。
Webページを埋め込めるだけでなく、Amazon Connectの通話情報を動的に取得して表示できるのはよいですね。
よりカスタマイズ性が広がりそうです。
ワークショップだけでなく、実際に実装できないか調べてやってみます。

ではまた！コンサルティング部の洲崎でした。

参考